.svg-pie-chart {
	.svg-pie-chart-arc-placeholder {
		fill: transparent;
	}

	.svg-pie-chart-space {
		stroke: $ui-bg-color;
		stroke-linecap: round;
	}

	.svg-pie-chart-arc-no-data-outer {
		fill: $pie-chart-arc-no-data-color;
	}

	.svg-pie-chart-arc-no-data-inner {
		fill: $ui-bg-color;
	}

	.svg-pie-chart-total-value div {
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		fill: $font-color;
	}

	.svg-pie-chart-total-value-no-data {
		text-anchor: middle;
		fill: $font-alt-color;
	}
}

.svg-pie-chart-legend {
	$svg-legend-line-height: 18px;

	position: relative;
	top: 4px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: repeat(var(--columns, 4), auto);
	grid-gap: 0 10px;
	justify-content: start;
	max-height: calc(var(--lines) * #{$svg-legend-line-height});
	margin: 0 10px;
	overflow: hidden;
	line-height: $svg-legend-line-height;

	.svg-pie-chart-legend-item {
		min-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		&::before {
			position: relative;
			top: -3px;
			content: ' ';
			display: inline-block;
			width: 10px;
			height: 4px;
			margin-right: 4px;
			background: var(--color);
		}
	}

	.svg-pie-chart-legend-header {
		grid-column-start: 2;
		color: $font-alt-color;
	}

	.svg-pie-chart-legend-no-data {
		color: $font-alt-color;
	}

	.svg-pie-chart-legend-header,
	.svg-pie-chart-legend-value,
	.svg-pie-chart-legend-no-data {
		text-align: right;
		white-space: nowrap;
	}

	&.svg-pie-chart-legend-show-value {
		grid-template-columns: auto max-content;
		justify-content: stretch;

		.svg-pie-chart-legend-item {
			grid-column-start: 1;
		}
	}
}

.svg-pie-chart-hintbox {
	display: flex;
	align-items: center;
	white-space: pre;

	.svg-pie-chart-hintbox-color {
		@extend %indicator-color-box;
	}
}
